<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <title>产品业绩销售统计</title>
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%; ">
</div>

<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.js"></script>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;

    // sid 类别id
    let getData = (sid) => {
        let prodData = null;
        let url = "/api/product/prod-sales";

        //带上类别id查询，比较相同类别产品销量
        // url = "/api/product/prod-sales"+ "?sid=" + 1;
        if (!!sid) {
            url += "?sid=" + sid;
        }

        $.get({
            async: false,
            cache: false,
            url: url, success: (data) => {
                // [{"parea": "上海",  "pname": "苹果",  "count": 300,   "pid": 1, "s_name": "水果类","sid": 1}]
                prodData = data;
            }
        });

        return prodData;
    };

    var prodData = getData(null);

    //重载柱状图
    //getData();

    option = {
        xAxis: {
            type: 'category',
            name: '产品名-产地',
            //产品名-产地
            data: prodData.map(m => m.pname + '-' + m.parea)
        },
        yAxis: {
            type: 'value',
            name: '产品销量'
        },
        series: [{
            // 销量
            data: prodData.map(m => m.count),
            type: 'bar'
        }]
    };


    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

</script>
</body>
</html>